<script setup lang="ts">
import { computed, isRef } from 'vue'

const props = defineProps({
  pointInfo: {
    type: [Object, Array],
    required: true,
  },
  address: {
    type: [Object, String],
    required: true,
  },
  id: {
    type: String,
    required: true,
  },
  deleteMarker: {
    type: Function,
    required: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const deleteClick = () => {
  props.deleteMarker(props.id)
}

const pointInfo = computed(() => {
  let item: number[] = []
  let address
  if (isRef(props.pointInfo)) {
    if (props.pointInfo.value) {
      item = props.pointInfo.value as number[]
      if (isRef(props.address)) {
        address = props.address.value
      }
    }
  } else {
    item = props.pointInfo as number[]
    address = props.address
  }
  return {
    lng: item[0],
    lat: item[1],
    address: address,
  }
})
</script>

<template>
  <div style="width: 100%" class="map-popup">
    <div v-if="!disabled" style="text-align: center; margin-top: 14px">
      <el-button icon="Delete" size="small" @click="deleteClick">
        删除
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.map-popup {
  width: 80px;
  padding: 8px;

  div {
    width: 60px;
    white-space: wrap;
  }
}

.mapboxgl-popup-content {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px #0000001a;
  pointer-events: auto;
  overflow: auto;
}

.el-button {
  width: 60px;
  height: 26px;
  justify-content: center;
  padding: 0;
  border-color: #28b1e4;
  color: #28b1e4;
}
</style>
